<template>
	<view class="u-wrap">
		<!-- 轮播图 -->
		<!-- <swiper class="swiper-container" circular :indicatorColor="indicatorColor" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item @click="toDetail(item.goods)" v-for="(item,index) in swipperList" :key='index'>
				<image class="imgs" :src="item.images.split(',')[0]"></image>
			</swiper-item>
		</swiper> -->
		<view class="container">
			<img style="width: 100vw; height: 30vh;" src="@/pages/index/p1.png" alt=""  />
			<!-- 搜索框 -->
			<view class="tab-strickt">
				<view class="helps">
					<img style="width: 60rpx; height: auto;" src="@/pages/index/robot.png"/>
					<view class="help" @click="toAsk()">欢迎使用闲物置换，我是ai小助手，快来向我提问吧</view>
				</view>
				<!-- <u-search v-model="keywords" @change="searchBtn" bg-color="#FFF" margin="8px" style="flex-grow: 1;" :show-action="true" action-text="搜索" :animation="true"></u-search> -->
			</view>
		</view>
		<view class="contain">
			<scroll-view :scroll-top="scrollTop" scroll-y="true">
					<view class="list" v-for="(item, index) in flowList" :key="index">
						
						<view class="" @click="toDetail(item)" :index="index">
							<!-- 用户信息 -->
							<view class="useInfo">
								<view class="useLeft">
									<img  class="useLeft" :src="item.userPicture" alt="" />
								</view>
								<view class="userRight">
									<view class="userName">{{item.nickName}}</view>
									<view class="userDate">{{item.createTime}}</view>
								</view>
							</view>
							<!-- 商品 -->
							<view class="product">
								<view class="Instructions">
									{{item.goodsName}}
								</view>
								<view v-if="item.image != ''" class="photoes">
									<img class="photoes" :src="item.image" alt="" />
								</view>
							</view>
							<!-- 底部 -->
							<view class="listBottom">
								<!-- 评论与浏览量 -->
								<view class="bottom_left">
									<view class="say">{{item.commentCount}}评论</view>
									<view class="say">{{item.goodsView}}浏览</view>
								</view>
								<view class="bottom_right">
									<view class="money">￥{{item.goodsPrice}}</view>
								</view>
							</view>
						</view>
					</view>
			</scroll-view>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadMore"></u-loadmore>
		</view>
	</view>
</template>

<script setup>
	import { onReady,onReachBottom,onShow,onPullDownRefresh } from '@dcloudio/uni-app';
	import {ref} from 'vue';
	import {getIndexBannerApi,getIndexListApi,addGoodsView} from '../../api/index.js'
	const indicatorDots = ref(true)
	const indicatorColor = ref("#FFF")
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)
	const uWaterfall1 = ref()
	//轮播图数据
	const swipperList = ref([])
	//瀑布流
	const flowList = ref([])
	//轮播图数据
	const getBannerList = async()=>{
		let res = await getIndexBannerApi()
		if(res && res.code == 200){
			console.log(res)
			swipperList.value = res.data;
		}
	}
	//热推数据
	const loadStatus = ref('loadmore')
	const currentPage = ref(1)
	const pageSize = ref(10)
	const keywords = ref('')
	const pages = ref(0)
	const getIndexList = async()=>{
		let res = await getIndexListApi({
			currentPage:currentPage.value,
			pageSize:pageSize.value,
			keywords:keywords.value
		})
		if(res && res.code == 200){
			console.log(res)
			flowList.value =res.data.goodsList
			pages.value = res.data.pages;
		}
	}
	//关键字搜索
	const searchBtn = ()=>{
		currentPage.value = 1;
		//清空瀑布流的数据
		uWaterfall1.value.clear()
		//获取数据
		getIndexList()
	}
	// 下拉刷新
	onPullDownRefresh(()=> {
		getIndexList()
	    uni.stopPullDownRefresh()
})
	//加载更多
	const loadMore = async()=>{
		console.log('加载更多')
		if(currentPage.value >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		//获取数据
		let res = await getIndexListApi({
			currentPage:currentPage.value,
			pageSize:pageSize.value,
			keywords:keywords.value
		})
		flowList.value = flowList.value+res.data.goodsList
	}
	//触底加载
	onReachBottom(()=>{
		console.log('触底加载')
		if(currentPage.value >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		//获取数据
		getIndexList()
	})
	//跳转详情页
	const toDetail = (item)=>{
		// 增加商品浏览量
		addGoodsView(item.goodsId)
		console.log(item.goodsId)
		if(item.type == '0'){
			uni.navigateTo({
				url:"../unused_detail/unused_detail?goods=" + JSON.stringify(item)
			})
		}else{
			uni.navigateTo({
				url:"../buy_detail/buy_detail?goods=" + JSON.stringify(item)
			})
		}
	}
	// 跳转ai问答页面
	const toAsk = () => {
		uni.navigateTo({
			url:'../ask/ask'
		})
	}
	// onReady(()=>{
	// 	getBannerList()
	// 	getIndexList()
	// })
	onShow(()=>{
		getBannerList()
		getIndexList()
	})
</script>

<style lang='scss'>
	body{
		background-color: rgb(240, 240, 240);
	}
.container {
  position: relative;
}
	.tab-strickt{
		position: relative;
		margin: 10px;
		margin-top: -1px;
		.helps{
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			line-height: 20px;
			transform: translate(-50%, -50%);
			background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
			padding: 10px;
			border-radius: 5px;
			background-color: #fff;
			width: 600rpx;
			color: #989898;
			box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
			display: flex;
			.help{
				padding-left: 10rpx;
			}
		}
	}
	
.swiper-container {
	height: 180px;
	z-index: -1;
	.item {
		height: 180px;
	}

	.imgs {
		height: 180px;
		width: 100%;
	}
}
.list{
	border-radius: 10px;
	margin: 10px;
	background-color: #fff;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
	
}
.useInfo{
	display: flex;
	padding: 10px ;
	.useLeft{
		background-color: antiquewhite;
		width: 36px;
		height:  36px;
		border-radius: 18px;
	}
	.userRight{
		margin-left: 10px;
		.userName{
			font-size: 14px;
			margin-bottom: 3px;
		}
		.userDate{
			font-size: 11px;
			color: #989898;
		}
	}
}
.product{
	padding: 10px;
		.Instructions{
			font-size: 16px;
			margin-bottom: 10px;
		}
		.photoes{
			/* background-color: #989898; */
			width:100px;
			height: 100px;
			border-radius: 20px;
		}
}
.listBottom{
	display: flex;
	justify-content: space-between;
	width: 100%;
	.bottom_left{
		display: flex;
		padding: 10px;
		color: #989898;
		.say{
			margin-right: 10px;
		}
	}
	.bottom_right{
		display: flex;
		width: 150rpx;
		justify-content: center; /* 水平居中 */
		align-items: center;     /* 垂直居中 */
		/* background-color: #ff7a69; */
		border-radius: 20px;
		margin-right: 15px;
		height: 30px;
		.money{
			display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center;     /* 垂直居中 */
			font-size: 20px;
			color: #ff570a;
			font-weight: 600;
			/* background-color: #ffba92; */
			width: 50px;
			border-radius: 20px 0 0 20px;
		}
		.contact{
			display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center;     /* 垂直居中 */
			color: azure;
			font-size: 16px;
			padding-left: 10px;
		}
	}
}
.contain{
	padding-bottom: 50px;
	margin-top: 30px;
}
</style>
